<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const onClickLeft = () => history.back()
const active1 = ref('')
const active2 = ref('')
const active3 = ref('')
const active4 = ref('')

import { showToast } from 'vant'
const formatter = (value: string) => value.replace(/\d/g, '')
// 性别
const male = ref(false)
const female = ref(false)
//失焦事件
const onBlur1 = () => {
  const reg =
    /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/
  let activedata = active2.value
  if (activedata.length != 0) {
    if (reg.test(activedata)) {
      // console.log(activedata);
      let nian = activedata.slice(6, 10)
      let yue = activedata.slice(10, 12)
      let ri = activedata.slice(12, 14)
      let fu = '-'
      active4.value = nian + fu + yue + fu + ri
      // 获取到身份证号的倒数第二位来判断性别
      activedata = activedata.slice(16, 17)
      localStorage.setItem('nian', JSON.stringify(nian))
      if (
        activedata === '0' ||
        activedata === '2' ||
        activedata === '4' ||
        activedata === '6' ||
        activedata === '8'
      ) {
        male.value = false
        female.value = true
      } else {
        male.value = true
        female.value = false
      }
    } else {
      showToast({ message: '身份证号码输入有误' })
    }
  }
}

// 本人
const My = ref(false)
const onMy = () => {
  My.value = true
  Spouse.value = false
  Parents.value = false
  Children.value = false
  Relatives.value = false
  Friend.value = false
  Others.value = false
  localStorage.setItem('doctor', JSON.stringify('本人'))
}

// 配偶
const Spouse = ref(false)
const onSpouse = () => {
  My.value = false
  Spouse.value = true
  Parents.value = false
  Children.value = false
  Relatives.value = false
  Friend.value = false
  Others.value = false
  localStorage.setItem('doctor', JSON.stringify('配偶'))
}
// 父母
const Parents = ref(false)
const onParents = () => {
  My.value = false
  Spouse.value = false
  Parents.value = true
  Children.value = false
  Relatives.value = false
  Friend.value = false
  Others.value = false
  localStorage.setItem('doctor', JSON.stringify('父母'))
}
// 子女
const Children = ref(false)
const onChildren = () => {
  My.value = false
  Spouse.value = false
  Parents.value = false
  Children.value = true
  Relatives.value = false
  Friend.value = false
  Others.value = false
  localStorage.setItem('doctor', JSON.stringify('子女'))
}
// 亲戚
const Relatives = ref(false)
const onRelatives = () => {
  My.value = false
  Spouse.value = false
  Parents.value = false
  Children.value = false
  Relatives.value = true
  Friend.value = false
  Others.value = false
  localStorage.setItem('doctor', JSON.stringify('亲戚'))
}
// 朋友
const Friend = ref(false)
const onFriend = () => {
  My.value = false
  Spouse.value = false
  Parents.value = false
  Children.value = false
  Relatives.value = false
  Friend.value = true
  Others.value = false
  localStorage.setItem('doctor', JSON.stringify('朋友'))
}
// 其他
const Others = ref(false)
const onOthers = () => {
  My.value = false
  Spouse.value = false
  Parents.value = false
  Children.value = false
  Relatives.value = false
  Friend.value = false
  Others.value = true
  localStorage.setItem('doctor', JSON.stringify('其他'))
}

const onSave = () => {
  if (
    My.value === false &&
    Spouse.value === false &&
    Parents.value === false &&
    Children.value === false &&
    Relatives.value === false &&
    Friend.value === false &&
    Others.value === false
  ) {
    showToast({ message: '请选择与您的关系' })
  } else if (active1.value === '') {
    showToast({ message: '请输入姓名' })
  } else if (active2.value === '') {
    showToast({ message: '请输入身份证号' })
  } else if (active3.value === '') {
    showToast({ message: '请输入手机号' })
  } else {
    //名字
    localStorage.setItem('name', JSON.stringify(active1.value))
    // 身份证
    localStorage.setItem('idcard', JSON.stringify(active2.value))
    // 手机号
    localStorage.setItem('sex', JSON.stringify(active3.value))
    // 出生日期
    localStorage.setItem('birthday', JSON.stringify(active4.value))
    // 性别
    localStorage.setItem('male', JSON.stringify(male.value))
    localStorage.setItem('female', JSON.stringify(female.value))
    router.back(-1)


  }
}
</script>

<template>
  <van-nav-bar title="新建档案" left-arrow @click-left="onClickLeft" />
  <div class="box">
    <div class="top">
      <van-notice-bar
        wrapable
        :scrollable="false"
        color="#fa6400"
        background="#ffefe5"
        style="
          width: 95%;
          margin-left: 2.5%;
          border-radius: 10px;
          padding: 2px 5px;
        "
        text="根据国家有关规定，就诊人未在实名认证就诊下，平台将无法提供就诊、药品、挂号等服务，请及时实名认证！"
      />
      <van-button
        type="primary"
        color="#1e6fff"
        style="width: 100px; height: 35px; margin: 15px 0 10px 10px"
        size="normal"
        >基本信息</van-button
      >
    </div>

    <div class="com">
      <div class="top1">
        <div class="title">与您的关系:</div>
        <div class="content">
          <div class="content-item">
            <span :class="My ? 'active' : ''" @click="onMy">本人</span>
            <span :class="Spouse ? 'active1' : ''" @click="onSpouse">配偶</span>
            <span :class="Parents ? 'active2' : ''" @click="onParents"
              >父母</span
            >
            <span :class="Children ? 'active3' : ''" @click="onChildren"
              >子女</span
            >
            <span :class="Relatives ? 'active4' : ''" @click="onRelatives"
              >亲戚</span
            >
            <span :class="Friend ? 'active5' : ''" @click="onFriend">朋友</span>
            <span :class="Others ? 'active6' : ''" @click="onOthers">其他</span>
          </div>
        </div>
      </div>

      <!-- <van-cell-group style="width: 95%; margin-left: 2.5%">
        <van-field
          style="height: 45px; margin-top: 10px"
          required
          label="姓名："
          placeholder="请输入真实姓名"
          input-align="right"
          v-model="active1"
          :formatter="formatter"
        format-trigger="onBlur"
        />
      </van-cell-group> -->
      <van-cell-group style="width: 95%; margin-left: 2.5%">
        <van-field
          style="height: 45px; margin-top: 10px"
          required
          label="姓名："
          placeholder="请输入真实姓名"
          input-align="right"
          v-model="active1"
          :formatter="formatter"
          format-trigger="onBlur"
        />
      </van-cell-group>
      <van-cell-group style="width: 95%; margin-left: 2.5%">
        <van-field
          style="height: 45px; margin-top: 10px"
          required
          label="身份证："
          placeholder="请输入身份证号"
          input-align="right"
          v-model="active2"
          @blur="onBlur1"
          maxlength="18"
        />
      </van-cell-group>
      <van-cell-group style="width: 95%; margin-left: 2.5%">
        <van-field
          style="height: 45px; margin-top: 10px"
          required
          label="出生日期："
          input-align="right"
          readonly
          v-model="active4"
        />
      </van-cell-group>
      <van-cell-group style="width: 95%; margin-left: 2.5%">
        <van-field
          style="height: 45px; margin-top: 10px"
          required
          label="性别："
          input-align="right"
          readonly
        />
        <div class="xb">
          <div class="nan" :class="male ? 'active' : ''">♂ 男</div>
          <div class="nv" :class="female ? 'active' : ''">♀ 女</div>
        </div>
      </van-cell-group>
      <van-cell-group style="width: 95%; margin-left: 2.5%">
        <van-field
          style="height: 45px; margin-top: 10px"
          required
          label="联系方式："
          placeholder="请输入手机号码"
          input-align="right"
          v-model="active3"
          maxlength="11"
        />
      </van-cell-group>
    </div>

    <van-button
      color="#1e6fff"
      style="
        width: 95%;
        margin-left: 2.5%;
        height: 45px;
        margin-top: 30px;
        margin-bottom: 120px;
      "
      type="primary"
      size="large"
      @click="onSave"
      >保存</van-button
    >
  </div>
</template>

<style scoped lang="scss">
.box {
  width: 375px;
  height: 621px;
  font-size: 0.35rem;
  background-color: #f5f5f5;
  overflow: scroll;
  position: relative;

  .top {
    width: 100%;
    background-color: #fff;
  }

  .com {
    width: 100%;

    .xb {
      width: 120px;
      height: 30px;
      display: flex;
      position: absolute;
      bottom: 5%;
      right: 2%;

      .nan,
      .nv {
        width: 50px;
        height: 25px;
        border: 1px solid #dedede;
        text-align: center;
        line-height: 25px;
        border-radius: 5px;
        margin-left: 10px;
      }

      .active {
        background-color: #1d51e0;
        color: #fff;
      }
    }

    .top1 {
      width: 95%;
      height: 115px;
      background-color: #fff;
      border-radius: 5px;
      margin-top: 10px;
      font-size: 0.3rem;
      margin-left: 2.5%;

      .title {
        height: 50px;
        width: 100%;
        line-height: 50px;
        margin-left: 10px;
      }

      .content {
        width: 100%;
        overflow: scroll;
        padding-bottom: 10px;

        .content-item {
          width: 120%;
          display: flex;
          justify-content: space-between;
          padding: 0 10px;

          span {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            color: #fff;
            text-align: center;
            line-height: 50px;
            background-color: #d0d0d0;
            margin-right: 10px;
          }

          .active {
            background-color: #779fef;
          }

          .active1 {
            background-color: #efcf77;
          }
          .active2 {
            background-color: #f9b385;
          }
          .active3 {
            background-color: #7de0c8;
          }
          .active4 {
            background-color: #af9bf7;
          }
          .active5 {
            background-color: #d897ea;
          }
          .active6 {
            background-color: #b5cdcc;
          }
        }
      }
    }
  }
}
</style>
